'use client'

import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import Timeline from '@/app/organic-tea/components/Timeline';
import Marquee from 'react-fast-marquee';
import LazyImage from '@/components/LazyImage';
import MediaCarousel from '@/app/good-tea/components/MediaCarousel';
import VideoPlayer from '@/components/VideoPlayer';
import NewsList from '@/components/NewsList';

export interface ComponentConfig {
  id: string;
  type: 'timeline' | 'marquee' | 'image' | 'carousel' | 'video' | 'iframe' | 'news-list';
  properties: any;
}

interface DroppedComponentProps {
  component: ComponentConfig;
  onDelete: (id: string) => void;
  onEdit: (id: string, properties: any) => void;
  isSelected: boolean;
  onSelect: (id: string) => void;
}

const DroppedComponent: React.FC<DroppedComponentProps> = ({ component, onDelete, onEdit, isSelected, onSelect }) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: component.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const renderComponent = () => {
    const properties = component.properties;

    switch (component.type) {
      case 'timeline':
        return <Timeline className="py-0" timelineData={properties.timelineData || []} />;

      case 'marquee':
        return (
          <Marquee
            direction={properties.direction || "left"}
            speed={properties.speed || 20}
            gradient={false}
            className="mb-4"
          >
            {(properties.images || []).map((img: string, i: number) => (
              <div key={i} className="mx-4">
                <img
                  loading='lazy'
                  src={img}
                  alt={`Marquee image ${i + 1}`}
                  className={"h-50 w-auto object-contain"}
                />
              </div>
            ))}
          </Marquee>
        );

      case 'image':
        return (
          <div style={{ minHeight: 200 }}>
            <img
              loading='lazy'
              src={properties.src || "/placeholder.jpg"}
              alt={properties.alt || ""}
              className={'w-full object-contain'}
            />
          </div>
        );

      case 'carousel':
        return (
          <MediaCarousel
            items={properties.items || []}
            autoplayDelay={properties.autoplayDelay || 1000}
            width={properties.width || "86%"}
            height={220}
            autoplay={properties.autoplay !== false}
          />
        );

      case 'video':
        return (
          <VideoPlayer
            src={properties.src || ""}
            className={"w-full h-[300px]"}
            objectFit={properties.objectFit}
            autoPlay={properties.autoPlay}
          />
        );

      case 'iframe':
        return (
          <iframe
            src={properties.src || "https://www.example.com"}
            className={"w-full h-72 border rounded"}
            allowFullScreen
            loading='lazy'
            title="嵌入网页"
          />
        );

      case 'news-list':
        return (
          <NewsList
            items={properties.items}
            imageWidth={200}
            imageHeight={150}
            itemsPerPage={properties.itemsPerPage || 3}
            maxDescriptionLength={10}
          />
        );

      default:
        return <div>未知的组件类型</div>;
    }
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`
        relative border border-gray-300 rounded-lg p-4 mb-4 bg-white shadow-sm cursor-pointer
        ${isDragging ? 'opacity-50' : ''}
        ${isSelected ? 'outline-2 outline-blue-500 bg-blue-50' : ''}
      `}
      onClick={() => onSelect(component.id)}
    >
      {/* Drag handle */}
      <div
        {...attributes}
        {...listeners}
        className="absolute top-2 left-2 cursor-move bg-gray-200 rounded p-1 hover:bg-gray-300"
        onClick={(e) => e.stopPropagation()}
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
          <path d="M10 13a1 1 0 100-2 1 1 0 000 2zM10 8a1 1 0 100-2 1 1 0 000 2zM10 5a1 1 0 100-2 1 1 0 000 2zM6 13a1 1 0 100-2 1 1 0 000 2zM6 8a1 1 0 100-2 1 1 0 000 2zM6 5a1 1 0 100-2 1 1 0 000 2z" />
        </svg>
      </div>

      {/* Action buttons */}
      <div className="absolute top-2 right-2 flex space-x-1">
        <button
          onClick={(e) => {
            e.stopPropagation();
            onDelete(component.id);
          }}
          className="bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600 transition-colors"
        >
          删除
        </button>
      </div>

      {/* Component content */}
      <div className="mt-8">
        {renderComponent()}
      </div>
    </div>
  );
};

export default DroppedComponent;